<template>
  <div class="invoices-container">
    <a-layout>
      <a-layout>
        <a-layout-header class="invoices-header">
          <in-card></in-card>
        </a-layout-header>
        <a-layout-content class="grid-box">
          <hand-son-table ref="handsontable"></hand-son-table>
        </a-layout-content>
        <div class="button-group">
          <a-button type="primary" icon="plus" @click="addNew">新增</a-button>
          <a-button icon="save" @click="save">保存</a-button>
          <a-button icon="file-add">新单</a-button>
          <a :href="`tcmis://${JSON.stringify(query)}`">打印</a>
        </div>
      </a-layout>
        <!-- <a-layout-sider>
          <in-slider></in-slider>
        </a-layout-sider> -->
    </a-layout>
  </div>
</template>
<script>
import inCard from '@/components/invoices/InvoicesCard'
import inSlider from '@/components/invoices/InvoicesSlider'
import HandSonTable from '@/components/middleware/HandSonTable'
export default {
  components: {
    inCard,
    inSlider,
    HandSonTable
  },
  data () {
    return {
      height: 0,
      query: {
        admin: 111,
        password: 22222
      }
    }
  },
  methods: {
    // 新增一行
    addNew () {
      let data = this.$refs['handsontable'].hotSettings.data
      data.push({})
    },
    // 保存表格数据
    save () {
      let hot = this.$refs['handsontable'].hot
      let gridSourceData = hot.getSourceData()
      console.log(gridSourceData)
    }
  }
}
</script>
<style lang="scss">
.invoices-container{
  height: 100%;
  .ant-layout.ant-layout-has-sider, .ant-layout {
    height: 100%;
  }
  header, .ant-layout-content, .ant-layout-sider {
    background: #fff;
  }
  .ant-layout-header {
    height: auto;
    padding: 0;
    max-height: 300px;
    min-height: 150px;
    overflow-y: auto;
  }
  .button-group {
    padding-top: 8px;
    background: #fff;
  }
  .grid-box {
    // overflow-y: auto;
  }
}
</style>
